<template>
   <el-col :xl="6" :md="6" :xs="24">
    <el-tag type="success">抽屉效果</el-tag><br/><br/>   
    <el-button @click="drawer = true" type="primary" style="margin: 15px 0 0 0" class="hidden-md-and-down">从右往左开</el-button>
    <el-button @click="drawer1 = true" type="primary" style="margin: 15px 0 0 0" class="hidden-md-and-up">从右往左开</el-button>
      <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" class="hidden-md-and-down">
        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar>
        <span>
          请登录
          <span><br>
          登录桌面自定义设置，以及相关数据可以多端保持同步，不会丢失数据。
          </span>
        </span>
      </div>
      </el-drawer>
      <el-drawer title="我是标题" :size="350" :visible.sync="drawer1" :with-header="false" class="hidden-md-and-up">
        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar>
        <span>
          请登录
          <span><br>
          登录桌面自定义设置，以及相关数据可以多端保持同步，不会丢失数据。
          </span>
        </span>
      </div>
      </el-drawer>
    </el-col>
</template>

<script>
export default {
    name:"Drawer",
   data() {
    return {
      drawer: false,
      drawer1: false,
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
    }
   },
}
</script>

<style>
.rtl{
  border-radius: 20px 0 0 20px!important;
}
.block span{
  vertical-align: middle;
}
</style>